<template>
	<view>
		<view style="display: flex;">
			<view style="width: 250rpx;">
				<u-input @click="time_btn" v-model="find_data.stime" border="true" type="select" placeholder='请选择日期' />
			</view>
			<view style="width: 250rpx;margin-left: 10rpx;">
				<u-input @click="plateNum_btn" v-model="find_data.plateNum" border="true" type="select"
					placeholder='全部车辆' />
			</view>
			<view style="width: 250rpx;margin-left: 10rpx;">
				<u-input @click="seats_btn" v-model="seatsname" border="true" type="select" placeholder='全部车型' />
			</view>

		</view>
		<view style="display: flex;margin-top: 10rpx;margin-bottom: 10rpx;">
			<view style="width: 250rpx;">
				<u-input @click="serviceType_btn" v-model="serviceTypename" border="true" type="select"
					placeholder='全部区域' />
			</view>
			<view style="width: 250rpx;margin-left: 10rpx;">
				<u-input @click="haveRoute_btn" v-model="haveRoutename" border="true" type="select"
					placeholder='有无行程' />
			</view>
			<view style="width: 250rpx;margin-left: 10rpx;">
				<u-input @click="dataTypename_btn" v-model="dataTypename" border="true" type="select"
					placeholder='数据展示' />
			</view>

		</view>

		<view v-if='dataTypename == "按24小时展示"'>
			<view style="width: 100vw;height: 85vh; overflow-y: auto;overflow-x: hidden;">
				<!-- 24+3 -->
				<view style="display: flex;">
					<view>
						<view v-for="item in 28" :key="item"
							style="width: 200rpx;height: 48rpx;border: 1px solid red; : ;"
							:style="item != 26 && item != 27? 'border-bottom: none;':item == 27?'border: none;':'' ">
							<view style="text-align: center;" v-if="item == 0">车牌号/座位数:</view>
							<view style="text-align: center;" v-if="item == 1">师傅姓名:</view>
							<view style="text-align: center;" v-if="item == 2">师傅手机:</view>
							<view style="text-align: center;  transform: translate(0px, -24rpx);" v-else-if="item >2">
								{{item - 3}}h
							</view>
						</view>
					</view>

					<view style="overflow-x: auto;display: flex;">
						<view v-for="item1,index in find_list" :key="index">
							<view v-for="item2,index2 in item1.dayList" :key="index2"
								style="width: 200rpx;height: 48rpx;border: 1px solid #00c3ce;border-left: none;white-space: nowrap; text-overflow: ellipsis;"
								:style="index2 != 26 && index2 != 27? 'border-bottom: none;':index2 == 27?'border: none;':'' ">
								<view  @click="toast_btn(item2.tips) "
									style="text-align: center;width: 200rpx;overflow: hidden;" v-if="index2 <3">
									{{item2.tips}}
								</view>
							
								<view  @click="toast_btn(item2.tips)"
									style="text-align: center;width: 200rpx;overflow: hidden;color: #fff;white-space: break-spaces;"
									:style="{'backgroundColor':item2.tips ==''?'':(index2 + 1) % 2 == 0?'red':'#bfa528','height':item2.height ==''?'':(item2.height * 0.8)+'rpx','transform':`translateY(${item2.min * 0.8}rpx)`,}"          
									v-else-if="index2 >2">
									{{item2.tips }} 
								</view>
							</view>

						</view>
					</view>

				</view>


			</view>
		</view>
		<!-- 30小时 -->
		<view v-else>
			<view style="width: 100vw;height: 85vh; overflow-y: auto;overflow-x: hidden;">
				<!-- 30+3 -->
				<view style="display: flex;">
					<view>
						<view v-for="item in 33" :key="item"
							style="width: 200rpx;height: 37rpx;border: 1px solid red; : ;"
							:style="item != 32 ? 'border-bottom: none;':''">
							<view style="text-align: center;" v-if="item == 0">车牌号/座位数:</view>
							<view style="text-align: center;" v-if="item == 1">师傅姓名:</view>
							<view style="text-align: center;" v-if="item == 2">师傅手机:</view>
							<view style="text-align: center;" v-else-if="item >2">{{item - 2}}号</view>

						</view>
					</view>

					<view style="overflow-x: auto;display: flex;">
						<view v-for="item1,index in find_list" :key="index">
							<view v-for="item2,index2 in item1.carMap.dayList" :key="index2"
								style="width: 200rpx;height: 37rpx;border: 1px solid #00c3ce;border-left: none;white-space: nowrap; text-overflow: ellipsis;"
								:style="index2 != 32 ? 'border-bottom: none;':''">
								<view @click="toast_btn(item2.text)"
									style="text-align: center;width: 200rpx;overflow: hidden;" v-if="index2 <3">
									{{item2.text}}
								</view>
								<view
									@click="toast_btn(item2.other == 0 ?'':item2.other >0?item2.other+'单':item2.other)"
									style="text-align: center;width: 200rpx;overflow: hidden;color: #fff;"
									:style="item2.other ==0 ?'':(index2 + 1) % 2 == 0?'background-color: red;':'background-color: #bfa528;'"
									v-else-if="index2 >2">
									{{item2.other == 0 ?'':item2.other >0?item2.other+'单':item2.other}}
								</view>
							</view>

						</view>
					</view>

				</view>


			</view>

		</view>
		<u-picker :params="params" @confirm="time_confirm" @cancel="time_cancel" v-model="time_show"
			:default-time="time_value" mode="time"></u-picker>
		<u-select @confirm="plateNum_confirm" :label-name='"plate_num"' :value-name='"plate_num"'
			v-model="plateNum_show" :list="plateNumList"></u-select>
		<u-select :label-name='"label"' :value-name='"id"' :list="needSeatsList" v-model="needSeats_show"
			@confirm="needSeats_confirm"></u-select>
		<u-select :label-name='"label"' :value-name='"id"' :list="serviceTypeList" v-model="serviceType_show"
			@confirm="serviceType_confirm"></u-select>
		<u-select :label-name='"label"' :value-name='"id"' :list="haveRouteList" v-model="haveRoute_show"
			@confirm="haveRoute_confirm"></u-select>
		<u-select :label-name='"label"' :value-name='"id"' :list="dataTypenameList" v-model="dataTypename_show"
			@confirm="dataTypename_confirm"></u-select>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	export default {

		data() {
			return {
				model: true,
				time_value: '',
				params: {
					year: true,
					month: true,
					day: true,
				},
				time_show: false,
				plateNum_show: false,
				plateNumList: [],
				needSeats_show: false,
				needSeatsList: [],
				serviceType_show: false,
				serviceTypeList: [],
				seatsname: '',
				serviceTypename: '',
				haveRoute_show: false,
				haveRouteList: [],
				haveRoutename: '',
				dataTypename_show: false,
				dataTypenameList: [],
				dataTypename: '按24小时展示',
				find_data: {
					emptyDays: '',
					plateNum: '',
					seats: '',
					serviceType: '',
					simpleDockedAddress: '',
					stime: '',
					haveRoute: '',

				},
				find_list: [],
			}
		},
		onReady() {
			let currentDate = new Date();

			let year = currentDate.getFullYear();
			let month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，然后补0
			let day = String(currentDate.getDate()).padStart(2, '0');
			let hours = String(currentDate.getHours()).padStart(2, '0');
			let minutes = String(currentDate.getMinutes()).padStart(2, '0');
			let seconds = String(currentDate.getSeconds()).padStart(2, '0');

			// let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			let formattedDate = `${year}-${month}-${day}`;
			this.time_value = formattedDate
			this.find_data.stime = formattedDate

		},
		onLoad(e) {

		},
		// 在 App.vue 中设置页面切换监听
		onShow() {

		},
		mounted() {
			let that = this
			that.$u.api.findCarCombo({
				page: {
					pageNum: 1,
					pageSize: 999,
				},
				plateNum: '',
			}).then(res => {
				let ps = {
					id: '全部车辆',
					plate_num: '全部车辆',
				}
				res.data.list.unshift(ps);
				that.plateNumList = res.data.list
				that.needSeatsList = [{
						id: '全部车型',
						label: '全部车型',

					}, {
						id: '5',
						label: '5座',

					}, {
						id: '7',
						label: '7座',

					},
					{
						id: '9',
						label: '9座',

					}, {
						id: '12',
						label: '12座',

					}, {
						id: '14',
						label: '14座',

					}, {
						id: '17',
						label: '17座',

					}, {
						id: '23',
						label: '23座',

					}, {
						id: '30',
						label: '30座',

					}, {
						id: '39',
						label: '39座',

					}, {
						id: '49',
						label: '49座',

					}, {
						id: '55',
						label: '55座',

					},
				]
				that.serviceTypeList = [{
					id: '全部区域',
					label: '全部区域',

				}, {
					id: 'COUNTY_SER',
					label: '县际业务',

				}, {
					id: 'CITY_SER',
					label: '市际业务',

				}, {
					id: 'PROVINCE_SER',
					label: '省际业务',

				}, ]
				that.haveRouteList = [{
					id: '有无行程',
					label: '有无行程',

				}, {
					id: '0',
					label: '无行程',

				}, {
					id: '1',
					label: '有行程',

				}, ]
				that.dataTypenameList = [{
					id: '按24小时展示',
					label: '按24小时展示',

				}, {
					id: '按30天展示',
					label: '按30天展示',

				}, ]


			});
			let currentDate = new Date();

			let year = currentDate.getFullYear();
			let month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，然后补0
			let day = String(currentDate.getDate()).padStart(2, '0');
			let hours = String(currentDate.getHours()).padStart(2, '0');
			let minutes = String(currentDate.getMinutes()).padStart(2, '0');
			let seconds = String(currentDate.getSeconds()).padStart(2, '0');
			let formattedDate = `${year}-${month}-${day}`;
			this.find_data.stime = formattedDate
			if (that.dataTypename == '按24小时展示') {
				that.find_api1()
			} else {
				that.find_api2()
			}

		},
		methods: {
			toast_btn(e) {

				this.$refs.uToast.show({
					title: e,
					type: 'default',
				})
			},
			time_btn() {
				this.time_show = true
			},
			time_confirm(e) {

				this.find_data.stime = e.year + "-" + e.month + "-" + e.day;
				this.time_value = e.year + "-" + e.month + "-" + e.day;
				this.time_show = false
				if (this.dataTypename == '按24小时展示') {
					this.find_api1()
				} else {
					this.find_api2()
				}
			},
			time_cancel() {
				this.time_show = false
			},
			plateNum_btn() {
				this.plateNum_show = true
			},
			plateNum_confirm(e) {
				if (e[0].value == '全部车辆') {
					this.find_data.plateNum = ''
				} else {
					this.find_data.plateNum = e[0].value
				}
				this.plateNum_show = false
				if (this.dataTypename == '按24小时展示') {
					this.find_api1()
				} else {
					this.find_api2()
				}
			},
			seats_btn() {
				this.needSeats_show = true
			},
			needSeats_confirm(e) {
				if (e[0].value == '全部车型') {
					this.find_data.seats = ''
					this.seatsname = ''
				} else {
					this.find_data.seats = e[0].value
					this.seatsname = e[0].label
				}
				this.needSeats_show = false
				if (this.dataTypename == '按24小时展示') {
					this.find_api1()
				} else {
					this.find_api2()
				}
			},
			serviceType_btn() {
				this.serviceType_show = true
			},
			serviceType_confirm(e) {
				console.log(e)
				if (e[0].value == '全部区域') {
					this.find_data.serviceType = ''
					this.serviceTypename = ''
				} else {
					this.serviceTypename = e[0].label
					this.find_data.serviceType = e[0].value
				}
				this.serviceType_show = false
				if (this.dataTypename == '按24小时展示') {
					this.find_api1()
				} else {
					this.find_api2()
				}
			},
			haveRoute_btn() {
				this.haveRoute_show = true
			},
			haveRoute_confirm(e) {

				if (e[0].value == '有无行程') {
					this.find_data.haveRoute = ''
					this.haveRoutename = ''
				} else {
					this.haveRoutename = e[0].label
					this.find_data.haveRoute = e[0].value
				}
				this.haveRoute_show = false
				if (this.dataTypename == '按24小时展示') {
					this.find_api1()
				} else {
					this.find_api2()
				}
			},
			dataTypename_btn() {
				this.dataTypename_show = true
			},
			dataTypename_confirm(e) {

				this.dataTypename = e[0].label
				this.dataTypename_show = false
				if (this.dataTypename == '按24小时展示') {
					this.find_api1()
				} else {
					this.find_api2()
				}
			},
			find_api1() {
				let that = this
				let ps = that.find_data
				that.$u.api.carServiceList(ps).then(res => {
					if (res.code == 1) {
						that.find_list = res.data
						for (let i = 0; i < that.find_list.length; i++) {

							let data1 = {
								orderNum: "",
								stime: "",
								etime: '',
								tips: that.find_list[i].plateNum + '/' + that.find_list[i].seats,
								min: '',
								height:'',
							}

							let driver = ''
							let Info = ''
							if (that.find_list[i].driverInfo.includes("/")) {
								driver = that.find_list[i].driverInfo.split('/')[0]
								Info = that.find_list[i].driverInfo.split('/')[1]
							} else {
								driver = that.find_list[i].driverInfo
								Info = ''
							}
							let data2 = {
								orderNum: "",
								stime: "",
								etime: '',
								tips: driver,
								min: '',
								height:'',

							}
							let data3 = {
								orderNum: "",
								stime: "",
								etime: '',
								tips: Info,
								min: '',
								height:'',
							}
							that.find_list[i].dayList = []
							that.find_list[i].dayList.unshift(data3);
							that.find_list[i].dayList.unshift(data2);
							that.find_list[i].dayList.unshift(data1);
							if (that.find_list[i].orders) {
								for (let j = 0; j < 25; j++) {
									let data4 = {
										orderNum: "",
										stime: "",
										etime: '',
										tips: '',
										min: '',
										height:'',
									}
									that.find_list[i].dayList.push(data4)
								}
								for (let x = 0; x < that.find_list[i].orders.length; x++) {
									let stime = that.find_list[i].orders[x].stime.split(" ")[1]
									let etime = that.find_list[i].orders[x].etime.split(" ")[1]
									let stime2 = stime.split(":")[0]
									let stime3 = stime.split(":")[1]
									let start_time = new Date(that.find_list[i].orders[x].stime);
									let end_time = new Date(that.find_list[i].orders[x].etime);
									let time_delta = end_time - start_time;
									let minutes_delta = Math.floor(time_delta / (1000 * 60));
									that.find_list[i].orders[x].height = minutes_delta
									that.find_list[i].orders[x].min = stime3
									if (Number(stime2) == 0) {
										that.find_list[i].dayList[3] = that.find_list[i].orders[x]

									} else if (Number(stime2) == 1) {
										that.find_list[i].dayList[4] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 2) {
										that.find_list[i].dayList[5] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 3) {
										that.find_list[i].dayList[6] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 4) {
										that.find_list[i].dayList[7] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 5) {
										that.find_list[i].dayList[8] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 6) {
										that.find_list[i].dayList[9] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 7) {
										that.find_list[i].dayList[10] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 8) {
										that.find_list[i].dayList[11] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 9) {
										that.find_list[i].dayList[12] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 10) {
										that.find_list[i].dayList[13] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 11) {
										that.find_list[i].dayList[14] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 12) {
										that.find_list[i].dayList[15] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 13) {
										that.find_list[i].dayList[16] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 14) {
										that.find_list[i].dayList[17] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 15) {
										that.find_list[i].dayList[18] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 16) {
										that.find_list[i].dayList[19] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 17) {
										that.find_list[i].dayList[20] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 18) {
										that.find_list[i].dayList[21] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 19) {
										that.find_list[i].dayList[22] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 20) {
										that.find_list[i].dayList[23] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 21) {
										that.find_list[i].dayList[24] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 22) {
										that.find_list[i].dayList[25] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 23) {
										that.find_list[i].dayList[26] = that.find_list[i].orders[x]
									} else if (Number(stime2) == 24) {
										that.find_list[i].dayList[27] = that.find_list[i].orders[x]
									}
								}


							} else {
								for (let j = 0; j < 25; j++) {
									let data4 = {
										orderNum: "",
										stime: "",
										etime: '',
										tips: '',
										min: '',
										height:'',
									}
									that.find_list[i].dayList.push(data4)
								}
							}
						}
						console.log(that.find_list, 'that.find_list')
					}
				});

			},
			find_api2() {
				let that = this
				let ps = that.find_data
				that.$u.api.carScheduleList(ps).then(res => {
					if (res.code == 1) {
						that.find_list = res.data
						for (let i = 0; i < that.find_list.length; i++) {

							let data1 = {
								id: "",
								other: "",
								sortNo: '',
								text: that.find_list[i].carMap.plateNum + '/' + that.find_list[i].carMap.seats,
								val: "",
							}

							let driver = ''
							let Info = ''
							if (that.find_list[i].carMap.driverInfo.includes("/")) {
								driver = that.find_list[i].carMap.driverInfo.split('/')[0]
								Info = that.find_list[i].carMap.driverInfo.split('/')[1]
							} else {
								driver = that.find_list[i].carMap.driverInfo
								Info = ''
							}
							let data2 = {
								id: "",
								other: "",
								sortNo: '',
								text: driver,
								val: "",
							}
							let data3 = {
								id: "",
								other: "",
								sortNo: '',
								text: Info,
								val: "",
							}
							that.find_list[i].carMap.dayList.unshift(data3);
							that.find_list[i].carMap.dayList.unshift(data2);
							that.find_list[i].carMap.dayList.unshift(data1);

						}

					}
				});

			},

		},



	}
</script>

<style lang="less">
	.lt-btns {
		display: flex !important;
	}

	.qj-list {
		min-height: 100vh;
		padding-top: 2rpx;
	}

	.routeSimpleName {
		position: absolute;
		left: 380rpx;
		width: 200rpx;
		background: #fff;
		top: 10rpx;
		z-index: 9999;
		text-align: center;
		border-radius: 10rpx;
		border: 1px solid #00C3CE;
		color: #00C3CE;
		margin-right: 10rpx;
		display: flex;
		height: 40rpx;
		justify-content: space-between;

	}
</style>